<!-- 应用管理-开发配置
 * @Descripttion: 
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-03-27
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-03-27
-->
<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="应用开发配置" @ok="form.onOk">
      <a-form :model="form.state" :rules="rules" ref="formRef" labelAlign="right" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="应用名称" name="clientName">
          <a-input v-model:value="form.state.clientName" placeholder="请输入应用名称" />
        </a-form-item>
        <a-form-item label="APPID" name="clientId">
          <a-input v-model:value="form.state.clientId" disabled placeholder="请输入APPID" />
        </a-form-item>
        <a-form-item label="AppSecret" name="clientSecret">
          <a-input v-model:value="form.state.clientSecret" disabled placeholder="请输入AppSecret" />
        </a-form-item>
        <a-form-item label="合法域名地址" name="webServerRedirectUri">
          <a-input v-model:value="form.state.webServerRedirectUri" placeholder="请输入合法域名地址" />
        </a-form-item>
        <a-form-item label="IP白名单保护" name="whiteIpOpen">
          <a-switch v-model:checked="form.state.whiteIpOpen" :unCheckedValue="0" :checkedValue="1" checked-children="开" un-checked-children="关" />
        </a-form-item>
        <a-form-item label="白名单IP" name="ipData">
          <a-input v-model:value="ipData" @keyup.enter="addIp" placeholder="请输入白名单IP" />
        </a-form-item>
        <a-form-item label="">
          <a-tag style="margin-bottom: 8px" v-for="(item, index) in ipList" :key="item" closable @close="deleteIp(index)">{{ item }}</a-tag>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestUpdateAppInfo } from '/@/api/system/app/config'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  const formRef = ref()
  const ipData = ref(null)
  const ipList = ref([])

  const props = defineProps({
    visible: { type: Boolean, default: false },
    data: { type: Object, default: null },
  })

  const emits = defineEmits(['update:visible', 'success'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        initData()
      }
    },
  )

  /**
   * 初始化数据
   */
  const initData = () => {
    formRef.value && formRef.value.resetFields()
    const { clientName, whiteIpOpen, whiteIp, webServerRedirectUri, clientId, clientSecret } = props.data
    ipList.value = whiteIp ? whiteIp.split(',') : []
    form.state = { clientName, whiteIpOpen, whiteIp, webServerRedirectUri, clientId, clientSecret }
  }

  /**
   * 白名单enter监听
   */
  const addIp = () => {
    if (ipData.value && ipData.value !== '') {
      if (ipList.value.length < 5) {
        ipList.value.push(ipData.value)
        ipData.value = null
      } else {
        message.error('最多可添加5个白名单IP')
      }
    }
  }

  /**
   * 白名单ip删除
   */
  const deleteIp = (itemIndex) => {
    ipList.value.splice(itemIndex, 1)
  }

  const rules = {
    clientName: [{ required: true, message: '请输入应用名称' }],
    whiteIp: [{ required: true, message: '请输入ip白名单' }],
    webServerRedirectUri: [{ required: true, message: '请输入合法域名地址' }],
  }

  /** 表单配置 */
  const form: {
    state: {
      clientName: string
      whiteIpOpen: number
      whiteIp: string
      webServerRedirectUri: string
      clientId: string
      clientSecret: string
    }
    rule: any
    onOk: Function
  } = reactive({
    state: {
      clientName: '',
      whiteIpOpen: null,
      whiteIp: '',
      webServerRedirectUri: '',
      clientId: '',
      clientSecret: '',
    },
    onOk: () => {
      formRef.value
        .validate()
        .then(async () => {
          const { clientName, whiteIpOpen, webServerRedirectUri, clientId } = form.state
          const { responseCode } = await requestUpdateAppInfo({ clientName, whiteIpOpen, whiteIp: ipList.value.join(','), webServerRedirectUri, clientId })
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success('修改成功')
            visible.value = false
            emits('success')
          }
        })
        .catch(() => {})
    },
  })
</script>

<style lang="less" scoped></style>
